{% load static from staticfiles %}
{% block mainbody %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'web/node_modules/bootstrap/dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/static/css/common.css' %}">
    <style type="text/css">
        body{min-height:2000px;padding-top:70px;}

        .navbar-default{background-color:#ff8800;border-color:#e7e7e7;}
        .navbar-default .navbar-brand{color:#fff;}
        .navbar-default .navbar-nav > li > a,.navbar-default .navbar-nav > li > a:visited {
            color: #fff;
            width:100px;
            font-size:14px;
            text-align:center;
        }
        .navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:visited,.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav li a:active {
            color:#fff;
            background-color: #FF4500;
            width:100px;
            font-size:14px;
            text-align:center;
        }
        
        table tr td{font-size:11px;} 
        table tr td.price{color:red;}
        table tr td.num span{color:red;padding:0px 5px}
        table tr td.num i{border-width:0px;background-color:#ddd;}  

        div.shoplist div.bn{font-size:12px;line-height:25px;}
        div.shoplist div.bn span.price{color:red;}
    </style>
</head>
<body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> <span style="font-weight:bold;">田老师红烧肉</span><span style="font-size:14px;">（朝阳将台路店）</span></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="{% url 'web_index' %}">堂吃点餐</a></li>
            <li><a href="#about">当前订单</a></li>
            <li><a href="{% url 'web_list' %}">历史订单</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">
                <span  class="glyphicon glyphicon-user" aria-hidden="true">
                </span>
                <span>{{request.session.vipuser.nickname}}</span>
                </a> 
            </li>


            <li><a href="{% url 'web_logout' %}">退出</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    
    <div class="container">
        <div class="col-md-4">
            <div class="panel panel-warning">
                <div class="panel-heading"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购 物 车</div>
                <table class="table table-striped">
                        <tr>
                            <th width="30">序</th>
                            <th>菜品</th>
                            <th width="72">数量</th>
                            <th width="45">单价</th>
                            <th>删除</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>梅菜扣肉+番茄鸡蛋</td>
                            <td class="num"><i class="btn btn-default btn-xs"> - </i><span>1</span><i class="btn btn-default btn-xs"> + </i></td>
                            <td class="price">38.00</td>
                            <td><a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
                        </tr>

                    </table>
                    
                    <li class="list-group-item">
                        <b>购买方式: &nbsp; </b>  
                        <input type="radio" name="ptype" checked value="1"> 堂吃 &nbsp; 
                        <input type="radio" name="ptype" value="2"> 打包 &nbsp; 
                    </li>
                    <li class="list-group-item">
                        <b>支付方式: &nbsp; </b> 
                        <input type="radio" name="bank" checked value="1"> 现金 &nbsp; 
                        <input type="radio" name="bank" value="2"> 支付宝 &nbsp; 
                        <input type="radio" name="bank" value="3"> 微信
                    </li>

                    <div class="panel-footer" style="height:50px">
                        <div style="width:120px;float:left;margin:5px 0px;">合计：￥<span style="color:red;font-weight:bold;">168.00</span> 元</div>
                        <button type="submit" class="btn btn-warning" style="width:130px;float:right">结 &nbsp; 算</button>
                    </div>
             
            </div>
        </div>
        <div class="col-md-8">
            <!--标签页内容-->
            <h5 style="padding-bottom:9px;border-bottom:1px solid #eee;color:#BB3D00"><span class="glyphicon glyphicon-list" aria-hidden="true"> 双拼套餐：</h5>
            <div class="row shoplist">
                {% for i in productlist %}
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                      <img src="{% static 'web/product/1536658574.2847373.webp' %}" alt="...">
                      <div class="caption">
                        <h6>
                            {{i.name}}
                        </h6>

                        <div class="bn">￥<span class="price"></span>元</a>
                        <a href="#" class="btn btn-warning btn-xs pull-right" role="button"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购买</a></div>
                        
                      </div>
                    </div>
                        
                </div>
                {% endfor %}
            </div>   
            <h4 style="padding-bottom:9px;border-bottom:1px solid #eee;"><span class="glyphicon glyphicon-cutlery" aria-hidden="true"> 盖饭系列：</h4>
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
            </div>   
            <h4 style="padding-bottom:9px;border-bottom:1px solid #eee;"><span class="glyphicon glyphicon-cutlery" aria-hidden="true"> 汤/饮料：</h4>
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img src="static/images/timg.jpg"
                             alt="通用的占位符缩略图">
                    </a>
                </div>
            </div>
            
        </div>
    </div>

    <script src="{% static 'web/static/js/jquery.min.js' %}"></script>
    <script src="{% static 'web/node_modules/bootstrap/dist/js/bootstrap.min.js' %}"></script>

</body>
</html>
{% endblock %}